<template>
  <div class="expt-statistics">
    <div class="statistics-content">
      <div v-for="(item, index) in exptStatisticsList" class="statistics-item" :key="index">
        <div>
          <span> {{ item.name }}</span>
          <span class="num">{{ item.num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";

import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({});
let emit = defineEmits([""]);
const exptStatisticsList = ref([
  {
    name: "所有实验",
    num: 200,
  },
  {
    name: "我参与的",
    num: 120,
  },
  {
    name: "进行中的",
    num: 3,
  },
  {
    name: "回收站",
    num: 5,
  },
]);

onMounted(() => {});
const color = "#424242";
</script>
<style scoped lang="scss">
.expt-statistics {
  overflow: hidden;
  height: 110px;


  .statistics-content {
    height: 80px;
    background: #272E31;
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    border-radius: 5px;
  }

  .statistics-item {
    margin-top: -20px;
    height: 80px;
    background: #50575E;
    width: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    border-radius: 5px;
    .num {
      font-size: 30px;
      font-weight: bold;
      color: #3088bf;
      vertical-align: middle;
      margin-left: 50px;
    }
  }
}
</style>
